﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <title></title>
    <link href="../plugins/fontawesome/css/font-awesome.min.css" rel="stylesheet" />
    <link href="../src/css/rayui.css" rel="stylesheet" />
    <link href="../css/common.css" rel="stylesheet" />
    <script src="../plugins/jquery-1.12.4.js"></script>
    <script src="../scripts/footer.js"></script>
    <script src="../src/js/rayui.js" use="validate,layer,elem"></script>
    <script src="../scripts/common.js"></script>
    <style>
        body {
            padding: 20px;
            margin: 0 auto;
        }
    </style>
</head>
<body>

    <h3 class="spliter">默认样式</h3>
    <ul class="rayui-timeline">
        <li>
            <i class="rayui-timelline-icon ra ra-circle"></i>
            <div class="rayui-timeline-content">timeline1</div>
        </li>
        <li>
            <i class="rayui-timelline-icon ra ra-circle"></i>
            <div class="rayui-timeline-content">timeline2</div>
        </li>
        <li>
            <i class="rayui-timelline-icon ra ra-circle"></i>
            <div class="rayui-timeline-content">timeline3</div>
        </li>
        <li>
            <i class="rayui-timelline-icon ra ra-circle"></i>
            <div class="rayui-timeline-content">timeline4</div>
        </li>
    </ul>
    
    <h3 class="spliter">自定义颜色</h3>
    <ul class="rayui-timeline">
        <li>
            <i class="rayui-timelline-icon ra ra-circle timeline-icon-blue"></i>
            <div class="rayui-timeline-content">timeline-icon-blue</div>
        </li>
        <li>
            <i class="rayui-timelline-icon ra ra-circle timeline-icon-green"></i>
            <div class="rayui-timeline-content">timeline-icon-green</div>
        </li>
        <li>
            <i class="rayui-timelline-icon ra ra-circle timeline-icon-red"></i>
            <div class="rayui-timeline-content">timeline-icon-red</div>
        </li>
        <li>
            <i class="rayui-timelline-icon ra ra-circle timeline-icon-yellow"></i>
            <div class="rayui-timeline-content">timeline-icon-yellow</div>
        </li>
    </ul>
    
<h3 class="spliter">嵌套+自定义时间线颜色</h3>
<ul class="rayui-timeline">
    <li class="timeline-line-blue">
        <i class="rayui-timelline-icon ra ra-circle timeline-icon-blue"></i>
        <div class="rayui-timeline-content">timeline-icon-blue</div>
    </li>
    <li class="timeline-line-green">
        <i class="rayui-timelline-icon ra ra-circle timeline-icon-green"></i>
        <div class="rayui-timeline-content">
            timeline-icon-green
            嵌套
            <ul class="rayui-timeline">
                <li>
                    <i class="rayui-timelline-icon ra ra-circle"></i>
                    <div class="rayui-timeline-content">timeline1</div>
                </li>
                <li>
                    <i class="rayui-timelline-icon ra ra-circle"></i>
                    <div class="rayui-timeline-content">timeline2</div>
                </li>
                <li>
                    <i class="rayui-timelline-icon ra ra-circle"></i>
                    <div class="rayui-timeline-content">timeline3</div>
                </li>
                <li>
                    <i class="rayui-timelline-icon ra ra-circle"></i>
                    <div class="rayui-timeline-content">timeline4</div>
                </li>
            </ul>
        </div>
    </li>
    <li class="timeline-line-red">
        <i class="rayui-timelline-icon ra ra-circle timeline-icon-red"></i>
        <div class="rayui-timeline-content">timeline-icon-red</div>
    </li>
    <li class="timeline-line-yellow">
        <i class="rayui-timelline-icon ra ra-circle timeline-icon-yellow"></i>
        <div class="rayui-timeline-content">timeline-icon-yellow</div>
    </li>
</ul>

    <h3 class="spliter">自定义图标+颜色</h3>
    <ul class="rayui-timeline">
        <li>
            <i class="rayui-timelline-icon timeline-icon-blue fa fa-calendar"></i>
            <div class="rayui-timeline-content">
                timeline-icon-blue + fa-calendar
                <p>使用font awesome字体库</p>
            </div>
        </li>
        <li>
            <i class="rayui-timelline-icon timeline-icon-green fa fa-bullhorn"></i>
            <div class="rayui-timeline-content">
                timeline-icon-green + fa-bullhorn
                <p>使用font awesome字体库</p>
            </div>
        </li>
        <li>
            <i class="rayui-timelline-icon timeline-icon-red fa fa-flag"></i>
            <div class="rayui-timeline-content">
                timeline-icon-red + fa-flag
                <p>使用font awesome字体库</p>
            </div>
        </li>
        <li>
            <i class="rayui-timelline-icon timeline-icon-yellow fa fa-image"></i>
            <div class="rayui-timeline-content">
                timeline-icon-yellow + fa-image
                <p>使用font awesome字体库</p>
            </div>
        </li>
    </ul>
    
</body>
</html>